<%@ include file="/WEB-INF/views/jsp/include/include.jsp"%>
<html>
<head>
    <title>Hand In Hand</title>
    <%@ include file="/WEB-INF/views/jsp/include/head.jsp"%>
</head>
<script type="text/javascript">

$( document ).ready(function() {
	$("#communityCreateForm").submit( function(event) {
		$('#selectedTags').val($("input[name='hiddenTagList']").val());
	});
});
$(function () {
    $(".tagsManager").tagsManager({
         prefilled: $('#selectedTags').val(),
         CapitalizeFirstLetter: true,
         preventSubmitOnEnter: true,
         typeahead: true,
         typeaheadAjaxSource: null,
         typeaheadSource: null,
         delimeters: [44, 188, 13],
         backspace: [8],
         blinkBGColor_1: '#FFFF9C',
         blinkBGColor_2: '#CDE69C',
         hiddenTagListId: 'hiddenTagList',
         hiddenTagListName: 'hiddenTagList',
         replace: true,
         tagsContainer: $('.tagList'),
         maxTags: 15
     });
});
</script>

<body>
	<%@ include file="/WEB-INF/views/jsp/include/header.jsp"%>
	<%@ include file="/WEB-INF/views/jsp/include/navigator.jsp"%>

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header">Create A Community</h3>
				<form:form id="communityCreateForm" modelAttribute="communityCreateForm"  method="post" action="./saveCommunity">
					<div class="row">
						<div class="col-xs-4 col-xs-offset-2">
							<div class="row">
								<div class="col-xs-12">
									<label>Name : </label>
									<form:input path="community.name" type="text" class="form-control" cssErrorClass="form-control inputError" placeholder="Community name" />
									<form:errors path="community.name" cssClass="errorMessage" />
								</div>
							</div>
							<div class="row">
								<div class="col-xs-12">
									<label>Info : </label>
									<form:textarea path="community.description" type="text" class="form-control" cssErrorClass="form-control inputError" placeholder="Community description" />
									<form:errors path="community.description" cssClass="errorMessage" />
								</div>
							</div>
							<div class="row">
								<div class="col-xs-12">
									<div id="tags" class="box">
										<label>Tags</label>
									 	<input type="text" name="tags" placeholder="Tags" class="tagsManager tm-input-success tm-input-small" />
										<div class="tagList"></div> 
										<form:input hidden="true" id="selectedTags" path="selectedTags" />
									</div>
								</div>
							</div>
						</div>
						<div class="col-xs-4">
							<br>
							<div class="row">
								<img class="col-xs-4 col-xs-offset-1" src=<c:url value="/resources/images/community-icon.png"/>/>
								<div class="col-xs-7">
									<h5>Upload a picture for your community</h5>
									<button class="btn btn-primary" type="button"> + Upload</button>
								</div>
							</div>
							<br>
							<div class="row">
								<div class="col-xs-11 col-xs-offset-1">
									<label>Community Privacy : </label>
									<form:radiobuttons path="community.privacy" class="radio" />
								</div>
								<div class="col-xs-11 col-xs-offset-1">
									<label>Whose permission is required for membership? : </label>
									<form:radiobuttons path="community.permission"  class="radio"/>
								</div>
							</div>
							<div class="row">
								<div class="col-xs-12">
									<br>
									<button class="btn btn-primary" type="submit">Create Community</button>
								</div>
							</div>
						</div>
					</div>
				</form:form>
			</div>
			<hr>
		</div>	
	</div>

	<%@ include file="/WEB-INF/views/jsp/include/footer.jsp"%>

</body>
</html>